<template>
  <div class="app-container">

    <el-form style="margin-bottom: 10px;">
      <el-input placeholder="主題名稱" style="width:300px;margin-right: 30px;" v-model="listQuery.title"></el-input>

      <el-select v-model="listQuery.type" clearable filterable style="margin-right: 30px;">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>

      <el-button icon="el-icon-search" type="primary" @click="getList">搜索</el-button>
      <el-button icon="el-icon-plus" type="primary" @click="add">新增</el-button>
    </el-form>

    <el-table ref="dragTable" v-loading="listLoading" :data="list" row-key="id" border fit highlight-current-row stripe
      :height="650" style="width: 100%">
      <el-table-column width="60" label="ID" centent>
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="300px" label="主題名稱">
        <template slot-scope="{row}">
          <span>{{ row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="300px" label="描述">
        <template slot-scope="{row}">
          <span>{{ row.desc }}</span>
        </template>
      </el-table-column>
      <el-table-column width="100px" label="類型">
        <template slot-scope="{row}">
          <span>{{ row.type == 1 ? "圖片" : "按鍵音" }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="80px" label="背景圖片">
        <template slot-scope="{row}">
          <img :src="row.src" style="width:50px !important;height:50px!important" v-if="row.type == 1">
          <div v-else>按鍵音</div>
          </img>
        </template>
      </el-table-column>
      <el-table-column min-width="180px" label="操作">
        <template slot-scope="{row}">
          <el-button icon="el-icon-delete" type="danger" @click="del(row)"></el-button>
          <el-button icon="el-icon-edit" type="primary" @click="edit(row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <template>
      <div style="height:50px;border:thin solid #e6e6e6; border-top: none; text-align: right;padding: 10px;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.pageNum"
          :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </template>

    <el-dialog :title="isSave ? '新增資源' : '編輯資源'" :visible.sync="dialogVisible" width="20%" :close-on-click-modal="false">
      <el-form :model="form" ref="form" label-width="80px" :inline="false" size="normal" :rules="ruleForm">
        <el-form-item label="主題名稱" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="圖片鏈接" prop="src">
          <el-input v-model="form.src"></el-input>
        </el-form-item>
        <el-form-item label="類型" prop="type">
          <el-select v-model="form.type" filterable style="margin-right: 30px;">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.desc"></el-input>
        </el-form-item>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getList, deleteById, save, updateById } from '@/api/resouce'
export default {
    name: "resouceTable",
    filters: {},
    data() {
        return {
            list: [],
            total: 0,
            listLoading: true,
            listQuery: {
                pageNum: 1,
                pageSize: 10,
                title: null,
                type: null
            },
            options: [
                {
                    label: "圖片",
                    value: "1"
                },
                {
                    label: "按鍵音",
                    value: "2"
                },
            ],
            loading: false,
            dialogVisible: false,
            form: {
                title: "",
                src: "",
                desc: "",
                type: "1",
            },
            ruleForm: {
                title: [
                    { required: true, message: "請輸入標題名稱", trigger: "blur" },
                    { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
                ],
                type: [
                    { required: true, message: "請選擇類型", trigger: "change" },
                ],
                src: [
                    { required: true, message: "請輸入圖片地址", trigger: "blur" },
                ],
            },
            isSave: true
        };
    },
    created() {
        this.getList();
    },
    methods: {
        async getList() {
            this.listLoading = true;
            const { data } = await getList(this.listQuery);
            this.list = data.list;
            this.total = data.total;
            this.listLoading = false;
        },
        async del(row) {
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(async () => {
                const { data } = await deleteById({ id: row.id });
                if (data == "success") {
                    this.$message.success("success");
                    this.getList();
                }
            });
        },
        add() {
            this.dialogVisible = true;
            this.form = { ...this.$options.data.form };
            this.isSave = true;
        },
        async edit(row) {
            this.dialogVisible = true;
            this.form = { ...row };
            this.isSave = false;
        },
        async submit() {
            this.$refs["form"].validate(async (valid) => {
                if (valid) {
                    if (this.isSave) {
                        var { data } = await save(this.form);
                    }
                    else {
                        var { data } = await updateById(this.form);
                    }
                    if (data == "success") {
                        this.$message.success("success");
                        this.dialogVisible = false;
                        this.getList();
                    }
                }
            });
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.listQuery.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.listQuery.pageNum = val;
            this.getList();
        }
    },

}
</script>

<style>
.sortable-ghost {
  opacity: .8;
  color: #fff !important;
  background: #42b983 !important;
}
</style>

<style scoped>
.icon-star {
  margin-right: 2px;
}

.drag-handler {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.show-d {
  margin-top: 15px;
}
</style>
